﻿@model ProductDetailsModel
@using Nop.Core.Domain.Media
@using Nop.Core.Infrastructure;
@using Nop.Web.Models.Catalog;
@{
    Html.AddScriptParts("~/Scripts/jquery.magnific-popup.js");
    Html.AddCssFileParts("~/Content/magnific-popup/magnific-popup.css");

    //int productPerRow = EngineContext.Current.Resolve<MediaSettings>().ProductThumbPerRowOnProductDetailsPage;   
    int productPerRow = 4; 
}



<div class="view-product">
    @if (Model.DefaultPictureZoomEnabled)
        {
            <a href="@Model.DefaultPictureModel.FullSizeImageUrl" title="@Model.Name" id="main-product-img-lightbox-anchor-@Model.Id">
                <img alt="@Model.DefaultPictureModel.AlternateText" src="@Model.DefaultPictureModel.ImageUrl" title="@Model.DefaultPictureModel.Title" itemprop="image" id="main-product-img-@Model.Id" />
            </a>
            <script type="text/javascript">
                $(document).ready(function () {
                    $('#main-product-img-lightbox-anchor-@Model.Id').magnificPopup(
                    {
                        type: 'image',
                        removalDelay: 300,
                        gallery: {
                            enabled: true
                        }
                    });
                });
            </script>
        }
        else
        {
            <img alt="@Model.DefaultPictureModel.AlternateText" src="@Model.DefaultPictureModel.ImageUrl" title="@Model.DefaultPictureModel.Title" itemprop="image" id="main-product-img-@Model.Id" />
        }
    
</div>
@if (Model.PictureModels.Count > 1)
    {

        <div id="similar-product" class="carousel slide" data-ride="carousel">
								
            <!-- Wrapper for slides -->
            <div class="carousel-inner">
                
                @for (int i = 0; i < Model.PictureModels.Count; i++)
                {
                    var picture = Model.PictureModels[i];

                    if (i % productPerRow == 0)
                    {
                        if(i==0)
                        {
                            @Html.Raw("<div class='item active'>")
                        }else
                        {
                            @Html.Raw("<div class='item'>")
                        }

                    }
                    <a class="thumb-popup-link" href="@picture.FullSizeImageUrl" title="@Model.Name">
                        <img src="@picture.ImageUrl" alt="@picture.AlternateText" title="@picture.Title" />
                    </a>
                    if ((i % productPerRow == (productPerRow - 1)) ||
                        //last image
                        (i == (Model.PictureModels.Count - 1)))
                    {
                        @Html.Raw("</div>")
                    }
                }
                
										
            </div>

            <!-- Controls -->
            <a class="left item-control" href="#similar-product" data-slide="prev">
                <i class="fa fa-angle-left"></i>
            </a>
            <a class="right item-control" href="#similar-product" data-slide="next">
                <i class="fa fa-angle-right"></i>
            </a>
        </div>
    
        <script type="text/javascript">
            $(document).ready(function () {
                $('.thumb-popup-link').magnificPopup(
                {
                    type: 'image',
                    removalDelay: 300,
                    gallery: {
                        enabled: true
                    }
                });
            });
        </script>
    }











